<script setup lang="tsx">
import { provide, reactive, ref } from 'vue';
import { getOneCodeAscendTopTable } from '@/service/api';
import SearchBox from './modules/search.vue';
import BatchInformation from './modules/batch-information.vue';
import PNLList from './modules/PNL-list.vue';
import BadnessList from './modules/badness-list.vue';

const searchParams = ref<any>({
  pnlId: null
});

const topPage = ref({
  pageNum: 1,
  pageSize: 200
});

const topColumnChecks = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotId',
    dataIndex: 'lotId',
    title: '生产批号',
    width: 140,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'productName',
    dataIndex: 'productName',
    title: '产品名称',
    width: 160,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotStatus',
    dataIndex: 'lotStatus',
    title: '批次状态',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'pnlId',
    dataIndex: 'pnlId',
    title: '工单',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'routeName',
    dataIndex: 'routeName',
    title: '制程名称',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'siteId',
    dataIndex: 'siteId',
    title: '工厂代码',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerName',
    dataIndex: 'customerName',
    title: '客户名称',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerPart',
    dataIndex: 'customerPart',
    title: '客户料号',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'codeCount',
    dataIndex: 'codeCount',
    title: '批次数量',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printCount',
    dataIndex: 'printCount',
    title: '打码数量',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);

const topTableData = ref([]);
const topTableLoading = ref(false);
const topRowSelection = ref<any[]>([]);

const pagination = reactive({
  current: topPage.value.pageNum,
  pageSize: topPage.value.pageSize,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number, range: number[]) => {
    console.log('object :>> ', range);

    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    console.log('current :>> ', current);
    pagination.current = current;
    pagination.pageSize = size;
    topPage.value.pageNum = current;
    topPage.value.pageSize = size;
    getTableData();
  }
});

const topCurrentRow = ref(null);

provide('lotId', topCurrentRow);
const currentLotId = ref<any>(null);
const customRow = record => {
  return {
    style: {
      background: record.lotId === currentLotId.value ? '#BAEAFA' : ''
    },
    class: record.lotId === currentLotId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentLotId.value = record.lotId;
    }
  };
};

function getTableData() {
  if (!searchParams.value.pnlId) {
    window.$message?.error('条码ID不能为空');
    return;
  }
  const params = {
    ...topPage.value,
    ...searchParams.value
  };
  topTableLoading.value = true;
  getOneCodeAscendTopTable(params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item: any, index: number) => {
          item.index = index + 1;
        });
        pagination.total = data.total;
        topTableData.value = data.list;
      }
    })
    .finally(() => (topTableLoading.value = false));
}

// getTableData();

function reset() {
  topPage.value.pageNum = 1;
  pagination.current = 1;
  getTableData();
}

function search() {
  topPage.value.pageNum = 1;
  pagination.current = 1;
  getTableData();
}

const activeKey = ref('1');
</script>

<template>
  <div class="jl-main-page one-code-ascend min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <div class="top-table h-40%">
      <ACard
        :bordered="false"
        :body-style="{ flex: 1, overflow: 'hidden' }"
        class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
      >
        <template #title>
          <SearchBox v-model:model="searchParams" class="w-full" @reset="reset" @search="search" />
        </template>
        <template #extra>
          <TableColumnSetting v-model:columns="topColumnChecks" />
        </template>
        <STable
          ref="tableWrapperRef"
          :columns="topColumnChecks"
          :data-source="topTableData"
          bordered
          size="small"
          :loading="topTableLoading"
          row-key="id"
          :pagination="pagination"
          :custom-row="customRow"
          class="h-full"
          :row-height="23"
        />
      </ACard>
    </div>
    <div class="bottom-box mt-8px h-60%">
      <ACard
        :bordered="false"
        :body-style="{ flex: 1, overflow: 'hidden' }"
        class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
      >
        <ATabs v-model:activeKey="activeKey" class="tabs h-full w-full">
          <ATabPane key="1" tab="批次信息" force-render>
            <BatchInformation v-model:lot-id="currentLotId" />
          </ATabPane>
          <ATabPane key="2" tab="PNL清单" force-render>
            <PNLList v-model:lot-id="currentLotId" />
          </ATabPane>
          <ATabPane key="3" tab="ipqc" force-render></ATabPane>
          <ATabPane key="4" tab="不良" force-render>
            <BadnessList v-model:lot-id="currentLotId" />
          </ATabPane>
          <ATabPane key="5" tab="生产记录" force-render></ATabPane>
          <ATabPane key="6" tab="制程管制" force-render></ATabPane>
        </ATabs>
      </ACard>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.one-code-ascend {
  .tabs {
    :deep(.ant-tabs-content) {
      height: 100%;
      overflow: auto;
      .ant-card-body {
        padding-bottom: 0;
      }
    }
  }
}
</style>
